import React, { useState,useEffect,useRef } from 'react'
import {Table, Button,Alert} from 'antd'
import {post} from '@/Utils/axios'
import {State} from '@/Utils/State/state'
import '@/assets/style/components.less'
import { ConsoleSqlOutlined } from '@ant-design/icons'
import FormItemLabel from 'antd/lib/form/FormItemLabel'
export default function table(props:any) {
    const [columns,setColumns] = useState([])  // 接收传入的表格参数
    const [data,setData] = useState([]) //  表格数据
    const [needPage,setNeedPage] = useState(false) // 内部配置分页
    const [pageSet,setPageSet] = useState(1) // 内部配置分页
    const [pageSizeSet,setPageSizeSet] = useState(15) // 内部配置分页数量
    const [url,setUrl] = useState('')   // 接收传入的接口地址
    const [formItem,setFormItem] = useState({}) // 接收传入的请求接口参数
    const [ChooseTableItem,setChooseTableItem] = useState(0)
    const [total,setTotal] = useState(0)
    const [selectedRowKeys,setSelectedRowKeys] = useState([]) 
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const state  = [...State]
    useEffect(()=>{
        // 初始方法
    },[])
    useEffect(() => {
        setColumns(props.columns)
    }, [props.columns])
    useEffect(()=>{
        setUrl(props.url)
    },[props.url])
    useEffect(()=>{
        handleFormSearch()
    },[url])
    useEffect(()=>{
        let obj = {
            ...props.formItem,
            page:pageSet,
            pageSize:pageSizeSet
        }
        console.log(props.formItem)
        setFormItem(obj)
    },[props.formItem])
    useEffect(()=>{
        let arr = [...selectedRowKeys]
        let list:any = []
       for(let i=0;i<arr.length;i++){
           let item = data.filter((t:any) =>t.id === arr[i])
           if(item.length > 0){
            list.push(item[0])
           }
       }
       props.onChooseItem(list)
    },[selectedRowKeys])
    useEffect(()=>{
        handleFormSearch()
    },[pageSet])
    // 查询方法
    function handleFormSearch(){
        post(url,formItem).then(res => {
            setTotal(res.total)
            setData(res.rows)
        })
    }
    // 改变页数
    function handlePageChange(page:any){ // 换页
        let obj = {...formItem}
        obj.page = page
        setFormItem(obj)
        setPageSet(page)
    }
    function cleanSelectedRowKey(){  // 清楚勾选
        let arr = []
        setChooseTableItem(0)
         setSelectedRowKeys([...arr])
    }
    const rowSelection = { // 勾选项 
        selectedRowKeys,
        onChange: (selectedRows:any) => {
            setChooseTableItem(selectedRows.length)
            setSelectedRowKeys([...selectedRows])
        },
        getCheckboxProps: (record: any) => ({
          disabled: record.name === 'Disabled User', // Column configuration not to be checked
          name: record.id,
        })
      };
      const page = {
        current: pageSet, //当前页码
        pageSize:pageSizeSet, // 每页数据条数
        showTotal: () => (
          <span>总共{total}项</span>
        ),
        total:total, // 总条数
        onChange: (page:any) => handlePageChange(page), //改变页码的函数
        hideOnSinglePage: false,
        showSizeChanger: false
      }
  return (
    <div>
        <Alert 
            message={ 
                <div className="alert_message">
                    <span>{`已选择：${ChooseTableItem} 项`}</span>
                    <Button size="small" type="link" onClick={cleanSelectedRowKey}>
                    清空
                    </Button>
                </div>} 
            type="info" 
            showIcon 
            style={{margin:'15px 0'}}
        />
        <Table
            rowKey="id"
            rowSelection={{
                type: selectionType,
                ...rowSelection,
            }}
            bordered={true}
            columns={columns}
            dataSource={data}
            pagination={!needPage?page:false}
            scroll={{x:true,y:500}}
        >
        </Table>
    </div>
  )
}
